正文：
前兩天我們透過了 vue 內的 data 來將資料餵給視圖中，然而我們也會需要對資料去進行編輯和監控，因此今天要介紹的即為資料的編輯方式

當我們要對資料進行更動，input element 總是不會缺席，不同於文字，我們需要將其更動的變數綁在 v-model 此屬性上，當 input element 進行更動時，此變數也會即時更新

<input v-model="inputValue" type="number">

data:{
    inputValue: 0
}

如同 html 中事件除了寫在行內也可以寫額外的方法來進行呼叫，而在 Vue 中我們需要將函式寫在 vue 內的 methods 上

<div id="app">
    <button @click="addCount()">add count</button>
    <p>count: {{count}}</p>
</div>
let app = new Vue({
    data: {
        count
    },
    methods: {
        addcount: function(){
        this.count += 1
        }
    }
}

這邊特別註明一下，我們這邊的函式現在都是掛在 vue 內的，因此我們使用 this 得到的是 vue 內的資料，因此這邊的 this.count 也等同於 app.count

而當我們需要對原始資料進行包裝又不希望更改它時可以使用 computed 此方法，computed 可以偵測其內部資料是否有進行更動，當有更動時就返回新的值，這邊以匯率來進行演示

<span>台幣 {{TWD}} 日幣 {{JPY}} 美金 {{USD}}</span>

vue實例：
data:{
    TWD:100
},
computed: {
    JPY: function(){
        return this.TWD*2684/10000
    },
    USD: function(){
        return this.TWD*29.09
    }
}

而後我們就可以得到 台幣 100 日幣 26.84 美金 2909 這樣的資訊囉

然而 computed 還是會遇到些問題，譬如當數據為非同步獲得或修改時在等待期間會出現問題，這時候我們可以透過 watch 此方法來更改數值，此方法會需要一個與他同名的變數

<input v-model="TWD" type="number">
<div>台幣 {{TWD}} 日幣 {{JPY}} 美金 {{USD}}</div>

data: {
    TWD: 100.0,
    JPY: 0,
    USD: 0
},
watch: {
    TWD: function(){
        this.JPY = this.TWD*2684/10000
        this.USD = this.TWD*29.09
    }
}

這邊只是演練一下 watch 的使用方法，根據官方文件指出，如非必要建議使用 computed 此計算方法，而非使用 watch 此命令式方法去進行資料監控。

嘮叨一下：
今天總算品嘗到了 200 元的果醬奶油厚片，位於台北市政府一號捷運出口旁，各方面來說真的都是不簡單啊...